<template>
  <div>
    <div id="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/admin">管理员列表</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>修改密码</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-card>
      <template>
        <a-form :form="form" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }" @submit="handleSubmit">
          <a-form-item label="用户密码">
            <a-input
                v-decorator="['password',{rules: [{required: true,message: '请输入用户密码',},],},]"
                type="password"
                allowClear
            />
          </a-form-item>
          <a-divider dashed/>
          <a-form-item label="确认密码">
            <a-input
                v-decorator="[
                  'confirm',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入确认密码',
                      },
                    ],
                  },
                ]"
                type="password"
                allowClear
            />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 12, offset: 12 }">
            <a-button type="primary" html-type="submit">
              保存
            </a-button>
          </a-form-item>
        </a-form>
      </template>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'AdminPassword',
  data () {
    return {
      form: null,
    }
  },
  mounted () {
    this.form = this.$form.createForm(this)
  },
  methods: {
    handleSubmit: function() {
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.$confirm({
            title: '确认操作',
            content: '保存后将无法撤回',
            onOk: () => this.$http.put(`api/admin/password/${this.$route.params.id}`, values).then((result) => {
              this.$message.success('修改密码成功')
            }, (error) => {
              this.$message.error(error.message)
            })
          })
        }
      })
    },
  }
}
</script>

<style scoped>
#breadcrumb {
  margin-top: 0;
  margin-bottom: 10px;
}
</style>